import React from 'react'
import Home from './Home'
import News from './News'
import About from './About'
class App extends React.Component {
    //切换显示 tab选项卡
    constructor() {
        super()
        this.state = {
            active: 0,
        }
        //选项卡的头
        this.nav = ['首页', '新闻', '关于我们']
    }
    render() {
        return <>
            <ul style={{ display: 'flex', justifyContent: 'space-between', listStyle: 'none' }}>
                {
                    this.nav.map((item, index) => {
                        return <li onClick={() => this.setState({ active: index })} style={this.state.active === index ? { background: 'red', color: 'white' } : {}} key={item}>{item}</li>
                    })
                }
            </ul>
            {/* 切换面板 - 遍历的方式 */}
            {
                [
                    <Home key='首页'></Home>,
                    <News key='新闻'></News>,
                    <About key='关于我们'></About>
                ].map((item, index) => {
                    console.log(item)
                    return this.state.active === index ? <div key={index}>
                        {React.cloneElement(item,{style:{background:'red'}},<p>不错</p>)}
                    </div> : ''
                    //     this.state.active === index && <div key={index}>
                    //     {item} </div>
                })
            }
            {/* 切换面板 - 条件控制渲染 */}

            {/* 笨方法
            {
                this.state.active === 0 ? <Home></Home> : this.state.active === 1 ? <News></News> : <About></About>
            } */}

            {/* 更笨的方法
            {
                this.state.active === 0 && <Home></Home>
            }
            {
                this.state.active === 1 && <News></News>
            }
            {
                this.state.active === 0 && <About></About>
            } */}
        </>
    }
}

export default App;